<!-- 用户管理页面 -->

<div class="container" :important="userinfo">

    <script>
        function userType(value, row, index) {

            if (row.userType == 'total'){
                return '总队用户'
            } else if (row.userType == 'totaldep'){
                return '总队科室用户'
            } else if (row.userType == 'branch'){
                return '支队用户'
            } else if (row.userType == 'branchdep'){
                return '支队科室用户'
            }
        }
    </script>
    <!--  handler area -->
    <div class="row handler">

        <span><i style="font-size: 15px" class="iconfont">&#xe601;</i>功能模块</span>
        <hr>

        <div class="btnBlock" type="f">

            <div>
                <i class="iconfont">&#xe6e4;</i>
                <span style="vertical-align: super;">查询用户</span>
            </div>

            <div class="triangle" type="display"></div>
        </div>

        <div class="btnBlock" type="s" id="modify" :click="@modifyModal">
            <div>
                <i class="iconfont">&#xe634;</i>
                <span style="vertical-align: super;">修改用户</span>
            </div>
        </div>

        <div class="btnBlock" type="t" id="add" data-toggle="modal" data-target="#addModal">

            <div>
                <i class="iconfont">&#xe617;</i>
                <span style="vertical-align: super;">新增用户</span>
            </div>

        </div>

        <div class="btnBlock" type="l" id="del" :click="@delModal">

            <div>
                <i class="iconfont">&#xe606;</i>
                <span style="vertical-align: super;">删除用户</span>
            </div>

        </div>

        <br>

        <!-- 查询操作 -->
        <div class="btnarea">
        <form role="form" class="form-horizontal" data-parsley-validate="" novalidate="">
            <div class="form-group">
                <!--用户账号-->
                <label for="userName" class="col-sm-1 control-label">用户账号</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" :duplex="@query.name">
                </div>

                <!--用户类型-->
                <div id="userTypeInput">
                <label class="col-sm-1 control-label">用户类型</label>
                <div class="col-sm-2">
                    <select id="officeTypeId" class="form-control" :duplex="@query.type">
                        <option disabled selected value="">--请选择--</option>
                        <option value="">全部类型</option>
                        <option value="total">总队账号</option>
                        <option value="totaldep">总队科室账号</option>
                        <option value="branch">支队账号</option>
                        <option value="branchdep">支队科室账号</option>
                    </select>
                </div>
                </div>

                <button type="button" class="btn btn-sm btn-primary btn-right" :click="@queryUserInfo">查询</button>
            </div>

        </form>
        </div>

        <div></div>
        <span><i style="font-size: 15px" class="iconfont">&#xe6d6;</i>列表展示</span>
        <hr>
    </div>



    <!-- data -->
    <div class="row data">
        <div>
            <table id="userTable"
               data-show-export="true"
               data-detail-formatter="detailFormatter"
               data-minimum-count-columns="2"
               data-pagination="true"
               data-id-field="id"
               data-page-list="[10, 25, 50, 100, ALL]"
               data-show-footer="false"
               data-side-pagination="client"
               data-click-to-select="true" data-page-number="1" data-page-size="5">
                <thead>
                    <tr>
                        <th data-field="state" data-radio="true"></th>
                        <th data-field="userName" data-sortable="true" >用户名</th>
                        <th data-field="userAccount" data-sortable="true">用户账号</th>
                        <th data-field="registerTime" data-sortable="true">注册时间</th>
                        <th data-field="userType" data-formatter="userType">用户类型</th>
                        <th data-field="ownName" data-sortable="true">所属机构</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>


    <!-- del user info modal -->
    <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h5 class="modal-title"><i style="font-size: 15px;margin: 0 10px;" class="iconfont">&#xe64c;</i>删除用户</h5>
                </div>
                <div class="modal-body">
                    <p style="color: red;text-align: center">删除操作不可逆，是否继续？</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" :click="@delUser">确定</button>
                </div>
            </div>
        </div>
    </div>



    <!-- modify user info modal -->
    <div class="modal fade" id="modifyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h5 class="modal-title" id="exampleModalLabel"><i style="font-size: 15px;margin: 0 10px;" class="iconfont">&#xe64c;</i>修改个人信息</h5>
          </div>
          <div class="modal-body">
            <div>
              <div class="row form-group">
                <label for="recipient-name" class="col-sm-2 col-sm-offset-1">用户名:</label>
                <input type="text" class="col-sm-8" id="recipient-name" :duplex="@modify.userName">
                  <span class="col-sm-1 tip">*</span>
              </div>

                <div class="row form-group">
                    <label for="recipient-name" class="col-sm-2 col-sm-offset-1">用户账号:</label>
                    <input type="text" class="col-sm-8" :duplex="@modify.userAccount">
                    <span class="col-sm-1 tip">*</span>
                </div>


              <div class="row form-group">
                <label for="message-text" class="col-sm-2 col-sm-offset-1">账户密码:</label>
                <input class="col-sm-8" id="message-text" :duplex="@modify.newPassword">
                  <span class="col-sm-1 tip">*</span>
              </div>
            </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" :click="@modifyUser">提交</button>
          </div>
        </div>
      </div>
    </div>


    <!-- add user info modal -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h5 class="modal-title"><i style="font-size: 15px;margin: 0 10px;" class="iconfont">&#xe64c;</i>新增用户</h5>
                </div>
                <div class="modal-body">
                    <div>
                        <div class="row form-group">
                            <label for="recipient-name" class="col-sm-2 col-sm-offset-1">用户名:</label>
                            <input type="text" class="col-sm-8" :duplex="@add.name">
                            <span class="col-sm-1 tip">*</span>
                        </div>
                        <div class="row form-group">
                            <label for="message-text" class="col-sm-2 col-sm-offset-1">账号:</label>
                            <input class="col-sm-8" :duplex="@add.userAccount">
                            <span class="col-sm-1 tip">*</span>
                        </div>
                        <div class="row form-group">
                            <label for="message-text" class="col-sm-2 col-sm-offset-1">账户密码:</label>
                            <input class="col-sm-8" :duplex="@add.userPassword">
                            <span class="col-sm-1 tip">*</span>
                        </div>

                        <div class="row form-group">
                            <label for="message-text" class="col-sm-2 col-sm-offset-1">用户类型:</label>
                            <select style="padding: 5px" class="col-sm-8" :duplex="@add.userType">
                                <option disabled selected value="">--请选择--</option>
                                <option :for="type in @userType" :attr="{value : type.type}">{{type.name}}</option>
                            </select>
                            <span class="col-sm-1 tip">*</span>
                        </div>

                        <div class="row form-group" :if="@showBranch">
                            <label for="message-text" class="col-sm-2 col-sm-offset-1">选择队伍:</label>
                            <select style="padding: 5px" class="col-sm-8" :duplex="@add.ownId">
                                <option disabled selected value="">--请选择--</option>
                                <option :for="type in @branch" :attr="{value : type.groupId}">{{type.groupName}}</option>
                            </select>
                            <span class="col-sm-1 tip">*</span>
                        </div>

                        <div class="row form-group" :if="@showTotalDep">
                            <label for="message-text" class="col-sm-2 col-sm-offset-1">选择科室:</label>
                            <select class="col-sm-8" :duplex="@add.ownId">
                                <option disabled selected value="">--请选择--</option>
                                <option :for="type in @dep" :attr="{value : type.depId}">{{type.depName}}</option>
                            </select>
                        </div>

                        <div class="row form-group" :if="@showBranchDep">
                            <label for="message-text" class="col-sm-2 col-sm-offset-1">选择科室:</label>
                            <select style="padding: 5px" class="col-sm-8" :duplex="@add.ownId">
                                <option disabled selected value="">--请选择--</option>
                                <option :for="type in @dep" :attr="{value : type.depId}">{{type.depName}}</option>
                            </select>
                            <span class="col-sm-1 tip">*</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" :click="@addyUser">提交</button>
                </div>
            </div>
        </div>
    </div>




    <!-- loding modal -->
    <div class="modal fade" id="userLodaingModal" tabindex="-1" role="dialog" aria-labelledby="lodaingModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-body">
                    loading....
                </div>

            </div>
        </div>
    </div>

</div>




